<template>
  <el-dialog v-model="visible" title="新增" :width="create?.width" :before-close="close">
    <cForm :form="form" :data="create?.data" :formConfig="create?.formConfig">
      <template #footer="{ formEl }">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm(formEl)">确定</el-button>
        </span>
      </template>
    </cForm>
  </el-dialog>
</template>

<script setup>
  import { reactive, inject, watch } from 'vue';
  import cForm from '../cForm/index.vue';

  const form = reactive({});

  const visible = inject('createVisible');
  const close = inject('closeCreate');
  const create = inject('createFormData');

  const cancel = () => {
    close();
  };

  const confirm = async formEl => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        create.submit(form, formEl);
        close();
      } else {
        console.log('error submit!', fields);
      }
    });
  };
</script>

<style scoped lang="scss">
  .item_container {
    display: flex;
  }
</style>
